<template>
    <div id="app">
        <page-topbar v-if="isTop" :text="text" :name="name" :avatar="avatar" @onRight="onRight"></page-topbar>
        <router-view></router-view>
        <page-tabbar v-if="isTab" :data="data"></page-tabbar>
        <page-toast :loading="toasts.loading" :toast="toasts.toast" :text="toasts.text" :icon="toasts.icon" :iconfont="toasts.iconfont"></page-toast>
    </div>
</template>

<script>
import PageTopbar from './components/Topbar/Index'
import PageTabbar from './components/Tabbar/Index'
import PageToast from './components/Toast/Index'
export default {
    name: 'app',
    components: {
        PageTopbar,
        PageTabbar,
        PageToast
    },
    data() {
        return {
            data: [
                { path: '/', icon: 'pinglun', text: '消息' },
                { path: '/link', icon: 'shouji', text: '联系人' },
                { path: '/mine', icon: 'wode', text: '我的' }
            ],
            toasts: {
                loading: false,
                toast: false,
                text: '',
                icon: false,
                iconfont: ''
            },
        }
    },
    methods: {
        onRight() {
            this.$router.push('/look');
        },
        iniwebSocket() {
            let that = this
            this.ws.onmessage = function(e) {
                var message = eval("("+e.data+")");
                switch(message.type) {
                    case "init":
                        if(that.$store.state.userInfo) {
                            let isuserObj = {
                                type: 'islogin',
                                fromId: that.$store.state.userInfo.id,
                                token: that.$store.state.userInfo.token
                            }
                            let isuserMsg = JSON.stringify(isuserObj);
                            that.ws.send(isuserMsg);
                        }
                        return;
                    case "bind":
                        var bindsObj = {
                            type: "bind",
                            fromId: that.$store.state.userInfo.id
                        }
                        var bindsMsg = JSON.stringify(bindsObj);
                        that.ws.send(bindsMsg);
                        return;
                    case "login":
                        that.Toast('登录成功','icon-chenggong',800);
                        that.$store.commit("setUserInfo", message.data);    
                        setTimeout(() => {
                            that.$router.push('/')
                        },500)
                        var bindObj = {
                            type: "bind",
                            fromId: that.$store.state.userInfo.id
                        }
                        var bindMsg = JSON.stringify(bindObj);
                        that.ws.send(bindMsg);
                        return;
                    case "register":
                        that.Toast('注册成功','icon-chenggong',800);
                        setTimeout(() => {
                            that.$router.push('/login')
                        },500)
                        return;
                    case "new":
                        var newsObj = {
                            type: 'news',
                            fromId: that.$store.state.userInfo.id,
                            token: that.$store.state.userInfo.token
                        }
                        var newsData = JSON.stringify(newsObj);
                        that.ws.send(newsData);
                        var linkObj = {
                            type: 'link',
                            id: that.$store.state.userInfo.id,
                            token: that.$store.state.userInfo.token
                        }
                        var linkData = JSON.stringify(linkObj);
                        that.ws.send(linkData);
                        var findObj = {
                            type: 'find',
                            id: that.$store.state.userInfo.id,
                            token: that.$store.state.userInfo.token
                        }
                        var findData = JSON.stringify(findObj);
                        that.ws.send(findData);
                        return;
                    case "text":
                        if(message.code == 200) {
                            that.$store.commit('setNewsList',message.data)
                        }
                        return;
                    case "chat":
                        if(message.code == 200) {
                            that.$store.commit('setChatList',message.msg)
                            that.$store.commit('setHeUser',message.data)
                        }
                        return;
                    case "send":
                        if(message.code == 200) {
                            that.$store.commit('pushChatList',message.data)
                            var newObj = {
                                type: 'news',
                                fromId: that.$store.state.userInfo.id,
                                token: that.$store.state.userInfo.token
                            }
                            var newData = JSON.stringify(newObj);
                            that.ws.send(newData);
                            var userObj = {
                                type: 'user',
                                id: that.$route.params.id,
                                fromId: that.$store.state.userInfo.id,
                                token: that.$store.state.userInfo.token
                            }
                            var userData = JSON.stringify(userObj);
                            that.ws.send(userData);
                        }
                        return;
                    case "link":
                        if(message.code == 200) {
                            that.$store.commit('setLinkList',message.data)
                        }
                        return;
                    case "search":
                        that.$store.commit('setLookList',message.data)
                        return;
                    case "add":
                        that.Toast('申请成功','icon-chenggong',800);
                        that.$router.push('/');
                        return;
                    case "find":
                        that.$store.commit('setNewList',message.data)
                        return;
                    case "update":
                        that.$store.commit("setUserInfo", message.data)
                        return;
                    case "nologin":
                        that.$store.commit("setUserInfo", '');
                        localStorage.clear()
                        that.$router.push('/login')
                        return;
                }
            }
        },
        //弹窗
        Toast(text,iconfont,time) {
            this.toasts.loading = false
            this.toasts.text = text
            this.toasts.icon = true
            this.toasts.iconfont = iconfont
            this.toasts.toast = true
            window.setTimeout(() => {
                this.toasts.toast = false
            },time);
        },
        ToastLoading() {
            this.toasts.loading = true
            this.toasts.icon = false
            this.toasts.text = '加载中...'
            this.toasts.toast = true
        },
        ToastClear() {
            this.toasts.toast = false
        }
    },
    computed: {
        isTop() {
            return this.$route.path == '/' || this.$route.path == '/link' ? true : false
        },
        isTab() {
            return this.$route.path == '/' || this.$route.path == '/link' || this.$route.path == '/mine' ? true : false
        },
        name() {
            return this.$store.state.userInfo.nickname
        },
        text() {
            return this.$route.path == '/' ? '消息' : this.$route.path == '/link' ? '联系人' : ''
        },
        avatar() {
            return this.$store.state.userInfo.avatar
        }
    },
    created() {
        this.iniwebSocket();
        window.document.documentElement.setAttribute( "data-theme",'light');
    }
}
</script>

<style lang="scss">
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
::-webkit-scrollbar {
    width: 0 !important;
}
::-webkit-scrollbar {
    width: 0 !important;height: 0;
}
html,body{
    font-size:16px;
    font-family:  'Open Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}
</style>